<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/style.css" />
</head>
<!--/meta 作为公共模版分离出去-->

<body>
	<article class="cl pd-20">
		<form action="" method="post" class="form form-horizontal" id="form-edata-add">
			<input type="hidden" name="classid" id="classid" value="">
			<input type="hidden" name="id" id="id" value="">
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">标题: </label>
				<div class="formControls col-xs-4 col-sm-6">
					<input type="text" class="input-text" value="" placeholder="" id="title" name="title">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">关键字:</label>
				<div class="formControls col-xs-4 col-sm-6">
					<input type="text" class="input-text" value="" placeholder="" id="keyword"" name="keyword">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">作者:</label>
				<div class="formControls col-xs-4 col-sm-6">
					<input type="text" class="input-text" value="" placeholder="" id="writer"" name="writer">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">来源:</label>
				<div class="formControls col-xs-4 col-sm-6">
					<input type="text" class="input-text" value="" placeholder="" id="source"" name="source">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">点击量:</label>
				<div class="formControls col-xs-4 col-sm-6">
					<input type="number" class="input-text" value="" placeholder="" id="onclick" name="onclick">
				</div>
			</div>
			<div class="row cl" style="display: none;">
				<label class="form-label col-xs-4 col-sm-2">缩略图:</label>
				<div class="formControls col-xs-4 col-sm-6">
					<input type="hidden" class="input-text" value="" placeholder="" id="titlepic" name="titlepic">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">图片简介：</label>
				<div class="formControls col-xs-4 col-sm-6">
					<textarea name="note" id="note" cols="" rows="" class="textarea" placeholder="说点什么...200个字符以内"
						dragonfly="true" onKeyUp="textarealength(this,200)"></textarea>
					<p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">
					<span class="c-red">* </span>图集:</label>
				<div class="formControls col-xs-4 col-sm-6">
					<a href="javascript:void(0);" class="btn btn-success radius" onClick="addImg()">
						添加图片</a>
				</div>
			</div>
			<div id="tuji">

			</div>
		</form>
		<div class=" col-xs-12 col-sm-12 col-md-8">
			<form action="" class="form form-horizontal" id="form-upload" enctype="multipart/form-data"
				style="display: none;">
				<div class="row cl  mt-20">
					<label class="form-label col-xs-3 col-sm-3">
					</label>
					<div class="formControls col-xs-4 col-sm-4">
						<input type="file" name="upload_file" id="upload_file">
						<input type="hidden" name="isthumb" value="1">
						<!-- 默认生成缩略图 -->
					</div>
					<div class="formControls col-xs-2 col-sm-2">
						<a href="javascript:;" class="btn btn-primary radius" onClick="uploadImg()">
							上传</a>
					</div>
				</div>
			</form>
		</div>
		<div class="row cl mt-20">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<input class="btn btn-primary radius" type="button" id="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
			</div>
		</div>
	</article>

	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="../lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="../static/h-ui/js/H-ui.js"></script>
	<script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.page.js"></script>
	<!--/_footer /作为公共模版分离出去-->

	<script type="text/javascript" src="../static/js/admin.js?123"></script>

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="../lib/jquery.validation/1.14.0/jquery.validate.js"></script>
	<script type="text/javascript" src="../lib/jquery.validation/1.14.0/validate-methods.js"></script>
	<script type="text/javascript" src="../lib/jquery.validation/1.14.0/messages_zh.js"></script>
	<script type="text/javascript">
		var action = ""
		var id = 0;
		var classid = 0;
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == "action") {
				action = pair[1];
			}
			if (pair[0] == "id") {
				id = parseInt(pair[1]);
			}
			if (pair[0] == "classid") {
				classid = parseInt(pair[1]);
			}
		}
		$("#classid").val(classid);
		if (action == "edit") {
			// console.log(id);
			$("#id").val(id)
			$.get("/ajax/edata/getonephoto", {
				"id": id
			}, function (data) {
				// console.log(data);
				if (data.success == true) {
					var photoData = data.data.photoData;
					$("#id").val(photoData.id);
					$("#classid").val(photoData.classid);
					$("#title").val(photoData.title);
					$("#keyword").val(photoData.keyword);
					$("#writer").val(photoData.writer);
					$("#source").val(photoData.source);
					$("#onclick").val(photoData.onclick);
					$("#titlepic").val(photoData.titlepic);
					$("#note").val(photoData.note);
					var morePic = photoData.morepic;
					// console.log(morePic);
					var pictureList = morePic.split(/\r\n|[\r\n]/);
					var tuji_str = "";
					for (let i = 0; i < pictureList.length; i++) {
						const picture = pictureList[i]; 
						if (picture==null || picture=="") {
							continue;
						}
						let picInfo = picture.split("::::::");
						// console.log(picInfo);
						iNum = i + 1;
						tuji_str += '<div class="row cl"><label class="form-label col-xs-1 col-sm-1">' + iNum + '</label>';
						tuji_str += '<div class="formControls col-xs-3 col-sm-3">';
							tuji_str += '缩略图:<input type="text" class="input-text thumb" value="' + picInfo[0] +
						'" placeholder="" id="thumb-' + iNum + '" name="thumb">';
						tuji_str += '</div><div class="formControls col-xs-3 col-sm-3">';
							tuji_str += '大图:<input type="text" class="input-text pic" value="' + picInfo[1] +
						'" placeholder="" id="pic-' + iNum + '" name="pic">';
						tuji_str += '</div><div class="formControls col-xs-3 col-sm-3">';
							tuji_str +=
						'图片说明<input type="text" class="input-text" value="'+picInfo[2]+'" placeholder="添加图片说明" id="sm-'+ iNum +'" name="sm"></div>';
						tuji_str +=
						'<label class="form-label col-xs-2 col-sm-2"><a href="javascript:void(0);" class="btn btn-success radius" onClick="replaceImg(this)">更换图片</a></label></div>';
					// console.log(img_str);
					}
					$("#tuji").append(tuji_str);
					tuji_str="";
				} else {
					layer.msg("数据不存在请稍后重试");
				}
			}, "json");
		}

		// 提交表单
		$(function () {
			$("#button").on('click', function () {
				if (validform().form()) {
					//通过表单验证，以下编写自己的代码
					var edata = $("#form-edata-add").parseForm();
					// console.log(edata);
					var morepic="";
					if ((edata.thumb instanceof Array) && (edata.pic instanceof Array)) {
						if (edata.titlepic=="") {
							edata.titlepic=edata.thumb[0];
						}
						var al = edata.thumb.length;
						// console.log(edata.thumb);
						// console.log(al);
						if (edata.sm instanceof Array) {
							for (let i = 0; i < al; i++) {
								const t = edata.thumb[i];
								morepic += t + "::::::" + edata.pic[i] + "::::::" + edata.sm[i] +"\n";
							}
						} else {
							for (let i = 0; i < al; i++) {
								const t = edata.thumb[i];
								morepic += t + "::::::" + edata.pic[i] + "::::::" + "\n";
							}
						}
					} else {
						if (edata.titlepic=="") {
							edata.titlepic=edata.thumb;
						}
						morepic += edata.thumb + "::::::" + edata.pic + "::::::" + edata.sm + "\n";
					}

					delete edata['thumb'];
					delete edata['pic'];
					delete edata['sm'];
					edata.morepic=morepic;

					// console.log(edata);
					// edata=null;
					// return false;
					$.ajax({
						type: 'post',
						url: '/ajax/edata/updatephoto',
						data: edata,
						dataType: "json",
						beforeSend: function (request) {
							request.setRequestHeader("authStr", window.localStorage.getItem(
								"userId") + "-" + window.localStorage.getItem("token"));
						},
						success: function (data) {
							// console.log(data);
							if (data.success == true) {
								if (action == "edit") {
									layer.msg(data.msg, {
										icon: 6,
										time: 1000
									}, function () {
										window.parent.location.reload();
										var index = parent.layer.getFrameIndex(window
											.name);
										parent.layer.close(index);
									});
								} else {
									// layer.msg(data.msg, {icon:6,time:1000});
									layer.confirm('数据添加成功!', {
										btn: ['继续添加', '返回列表'] //按钮
									}, function () {
										$("#form-edata-add")[0].reset();
										layer.closeAll('dialog');
									}, function () {
										window.parent.location.reload();
										var index = parent.layer.getFrameIndex(window
											.name);
										parent.layer.close(index);
									});
								}
							} else {
								layer.msg(data.msg, {
									icon: 5,
									time: 2000
								});
							}
							return false;
						}
					});
					return false;
				} else {
					//校验不通过，什么都不用做，校验信息已经正常显示在表单上
					layer.msg("请按要求填写表单", {
						icon: 5,
						time: 2000
					});
					return false;
				}
			});
		});

		//编写表单验证函数validform，在验证按钮注册按钮点击事件内调用验证函数对象
		function validform() {
			/*关键在此增加了一个return，返回的是一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/
			return $("#form-edata-add").validate({
				rules: {
					title: {
						required: true
					},
				},
				messages: {
					title: {
						required: '标题必填',
					},
				},
				onkeyup: false,
				focusCleanup: true,
				success: "valid"
			});
		}
		//注册表单验证
		$(validform());

		function addImg() {
			$("#form-upload").css("display", "block");
		}

		var thatImg = null;
		var uploadRepalce = false;

		function replaceImg(obj) {
			$("#form-upload").css("display", "block");
			uploadRepalce = true;
			thatImg = obj;
			// console.log($(thatImg).parents('.row').find('input.thumb'));
			// console.log($(thatImg).parents('.row').find('input.pic'));
		}

		var imgNum = 0;

		function uploadImg() {
			if ($("#upload_file").val() == '') {
				layer.msg("请选择要上传的文件", {
					icon: 6,
					time: 1000
				});
				return false;
			} else {
				var formData = new FormData($("#form-upload")[0]);
				//ajax上传
				$.ajax({
					url: '/ajax/file_manager/uploadimg',
					type: 'POST',
					async: true,
					cache: false,
					data: formData,
					processData: false,
					contentType: false,
					dataType: "json",
					beforeSend: function (request) {
						request.setRequestHeader("authStr", window.localStorage.getItem(
							"userId") + "-" + window.localStorage.getItem("token"));
					},
					success: function (data) {
						console.log(data);
						if (data.success == true) {
							img = data.data;
							// console.log(uploadRepalce);
							if (uploadRepalce) {
								$(thatImg).parents('.row').find('input.thumb').val(img.thumb);
								$(thatImg).parents('.row').find('input.pic').val(img.picname);
								thatImg = null;
								uploadRepalce = false;
							} else {
								imgNum++;
								var img_str = "";
								img_str += '<div class="row cl"><label class="form-label col-xs-1 col-sm-1">' +
									imgNum + '</label>';
								img_str += '<div class="formControls col-xs-3 col-sm-3">';
								img_str += '缩略图:<input type="text" class="input-text thumb" value="' + img.thumb +
									'" placeholder="" id="thumb-' + imgNum + '" name="thumb">';
								img_str += '</div><div class="formControls col-xs-3 col-sm-3">';
								img_str += '大图:<input type="text" class="input-text pic" value="' + img.picname +
									'" placeholder="" id="pic-' + imgNum + '" name="pic">';
								img_str += '</div><div class="formControls col-xs-3 col-sm-3">';
								img_str +=
									'图片说明<input type="text" class="input-text" value="" placeholder="添加图片说明" id="sm-1" name="sm"></div>';
								img_str +=
									'<label class="form-label col-xs-2 col-sm-2"><a href="javascript:void(0);" class="btn btn-success radius" onClick="replaceImg(this)">更换图片</a></label></div>';
								// console.log(img_str);
								$("#tuji").append(img_str);
							}
							$("#form-upload")[0].reset();
							$("#form-upload").css("display", "none");
						} else {
							layer.msg(data.msg);
							return false;
						}
						// uploading = false;
					}
				});
			}
		}
	</script>
	<!--/请在上方写此页面业务相关的脚本-->
</body>

</html>